<template>
  <div class="cinema">
    <header>
      <div class="h-left">
        <router-link to="">首页</router-link> >
        <router-link to="">影院</router-link> > 北京
      </div>
      <div class="steps">
        <span>3步轻松购票:1.选座购票/买券</span>
        <i></i>
        <span>2.收电子码</span>
        <i></i>
        <span>3.影院取票</span>
      </div>
    </header>
    <main>
      <div class="filter-wrap">
        <ul class="filter-select">
          <li>
            <label>选择区域</label>
            <div class="select-tags">
              <a href="javascript:;" class="active">全部区域</a>
              <a href="javascript:;">昌平区</a>
              <a href="javascript:;">朝阳区</a>
              <a href="javascript:;">大兴区</a>
              <a href="javascript:;">东城区</a>
              <a href="javascript:;">房山区</a>
              <a href="javascript:;">丰台区</a>
              <a href="javascript:;">海淀区</a>
              <a href="javascript:;">怀柔区</a>
              <a href="javascript:;">门头沟区</a>
              <a href="javascript:;">密云区</a>
              <a href="javascript:;">平谷区</a>
              <a href="javascript:;">石景山区</a>
              <a href="javascript:;">顺义区</a>
              <a href="javascript:;">通州区</a>
              <a href="javascript:;">西城区</a>
              <a href="javascript:;">延庆区</a>
            </div>
            <a href="javascript:;" class="select-show">更多></a>
          </li>
          <li>
            <label>搜索</label>
            <div class="search-wrap">
              <input
                type="text"
                placeholder="请输入影院名称/关键字"
                class="search-input"
              />
              <a href="javascript:;" class="search-btn">查询</a>
            </div>
          </li>
        </ul>
        <div class="list-sort">
          排序：
          <router-link to="" class="a active">综合</router-link>
          <router-link to="" class="a"
            >评分<i class="toggle-down"></i
          ></router-link>
          当前条件下共有
          <span class="count">233</span>家影院
        </div>
        <ul class="cinema-list">
          <li v-for="(item, index) in cinema" :key="index">
            <div class="pic"><img :src="item.imgsrc" alt="" /></div>
            <div class="detail-middle">
              <h4>{{ item.name }}</h4>
              <div class="middle-p">
                <div class="middle-p-list">
                  <i>地址：</i>
                  <span class="limit-address">{{ item.address }}</span>
                  <a href="javascript:;" class="miniMap">[地图]</a>
                </div>
                <div class="middle-p-list">
                  <i>电话：</i>
                  {{ item.tel }}
                </div>
                <div class="middle-p-list">
                  <i>更多：</i>
                  <a href="javascript:;" class="middle-more">影院服务</a>
                  <a href="javascript:;" class="middle-more">交通信息</a>
                </div>
              </div>
            </div>
            <div class="detail-right">
              <div class="right-score">
                评分：<strong> {{ item.score }}</strong>
              </div>
              <div class="right-fav"></div>
              <router-link to="" class="right-buy">选座</router-link>
            </div>
          </li>
        </ul>
        <div class="cinema-more">
          <div>
            <a href="javascript:;">点击显示更多</a>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Cinema",
  data() {
    return {
      cinema: {},
    };
  },
  methods: {
    async getData() {
      let { data } = await axios.get("http://localhost:3000/cinema");
      this.cinema = data;
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style scoped>
.cinema {
  width: 990px;
  margin: 0 auto;
  color: #333;
}
header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.steps {
  color: #9a9a9a;
  display: flex;
  align-items: center;
}
.steps i {
  width: 14px;
  height: 60px;
  margin: 0 5px;
  background: url(https://img.alicdn.com/tps/i3/TB1apxtGXXXXXX7XVXXNqXbFXXX-14-9.png)
    center center no-repeat;
}
main {
  display: flex;
}
.filter-wrap {
  width: 638px;
  border: 1px solid #ddd;
  overflow: hidden;
}
.filter-select {
  padding-left: 90px;
  background: #ffdddc;
  overflow: hidden;
  border-bottom: 2px solid #d21438;
}
.filter-select li {
  position: relative;
  line-height: 25px;
  padding: 12px 60px 12px 0;
  background: #fff6f5;
  height: auto;
}
.filter-select label {
  position: absolute;
  width: 90px;
  left: -90px;
  text-align: center;
  color: #797979;
}
.select-tags {
  width: 100%;
  max-height: 50px;
  overflow: hidden;
}

.select-tags a {
  width: auto;
  padding: 0 8px;
  margin-left: 22px;
  margin-top: 2px;
  height: 25px;
  line-height: 25px;
  white-space: nowrap;
  display: inline-block;
  color: #4f4f4f;
}
.select-tags a.active,
.select-tags a:hover {
  color: #fff;
  background: #f42429;
}
.select-show {
  position: absolute;
  bottom: 12px;
  right: 18px;
  color: #ef2e50;
  padding: 0 8px;
  margin-left: 22px;
  margin-top: 2px;
}
.search-input {
  width: 219px;
  height: 28px;
  background: #fff;
  color: #626060;
  outline: 0;
  border: 1px solid #e5e5e5;
  border-right: none;
  float: left;
  text-indent: 4px;
  margin-left: 22px;
}
.search-btn {
  display: inline-block;
  width: 70px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0;
  color: #fff;
  text-align: center;
  text-indent: 1.2em;
  background: #eb002a
    url(https://img.alicdn.com/tps/i2/TB1njJOGXXXXXbeXpXXAz6UFXXX-16-16.png)
    no-repeat 13px 6px;
  background-size: 16px 16px;
}
.list-sort {
  height: 66px;
  line-height: 66px;
  padding: 0 20px;
  color: #999;
}
.list-sort .a {
  color: #333;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 5px 10px;
  margin: 0 10px;
}
.list-sort .active {
  color: #eb002a;
  border: 1px solid #eb002a;
}
.list-sort .count {
  font-weight: 700;
  color: #eb002a;
}
.toggle-down {
  display: inline-block;
  width: 10px;
  height: 9px;
  overflow: hidden;
  background: url(//img.alicdn.com/tps/i3/TB1ohCwGXXXXXXJXpXXCTy7GXXX-33-43.png) -19px -27px
    no-repeat;
}
.cinema-list li {
  padding: 22px 19px 18px;
  border-bottom: 1px dashed #ddd;
  position: relative;
  overflow: hidden;
}
.pic {
  position: relative;
  float: left;
  width: 118px;
  height: 88px;
  border: 1px solid #ddd;
}
.pic img {
  width: 118px;
  height: 88px;
}
.detail-middle {
  width: 300px;
  float: left;
  padding-left: 19px;
  color: #999;
  overflow: hidden;
}
.detail-middle h4 {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
.middle-p {
  padding-top: 10px;
}
.middle-p-list {
  clear: both;
  line-height: 22px;
  color: #666;
}
.middle-p-list i {
  color: #999;
  float: left;
  font-style: normal;
}
.limit-address {
  max-width: 70%;
  float: left;
  height: 23px;
  line-height: 23px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.miniMap {
  color: #eb002a;
}
.middle-more {
  padding-right: 8px;
  color: #3180de;
}
.detail-right {
  float: right;
  width: 160px;
  overflow: hidden;
}
.right-score {
  color: #666;
  text-align: right;
}
.right-score strong {
  color: #eb002a;
  font-weight: 700;
  font-family: Verdana;
}
.right-fav {
  padding: 8px 0 14px;
  text-align: right;
}
.right-buy {
  float: right;
  padding: 2px 11px;
  text-align: center;
  line-height: 24px;
  color: #fff;
  background: #eb002a;
  margin-left: 5px;
}
.cinema-more {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
.cinema-more div {
  background: #f0f0f0;
  padding: 15px 0;
}
.cinema-more a {
  display: inline-block;
  height: 20px;
  color: #000;
  background: url(//img.alicdn.com/tps/i4/TB1tAxyGXXXXXaGXVXX7uIbFpXX-7-30.png)
    80px 6px no-repeat;
  padding-right: 24px;
  text-decoration: none;
}
</style>